/**
 * @author:linjiye
 * @date: 2024/12/27
 * @desc:
 **/

import {StyleSheet, Image, View} from 'react-native'
import React, {ReactElement} from 'react'
import {FcView} from "@/components/FcView";
import {FcText} from "@/components/FcText";
import LinearGradientText from "@/components/LinearGradientText";

type Props = {
    title?: string,
    titleHint?: string,
    isLeftIcon?: boolean,
    left?: ReactElement,
    right?: ReactElement,
    style?: { paddingHorizontal: number }
    leftStyle?: object
    titleStyle?: object
    titleHintStyle?: object
    textJB?: boolean
    fontSize?: number
    colorList?: Array<any>,
}

const defaultColorList = [
    {
        offset: '0%',
        stopColor: '#2856FF',
        stopOpacity: "1"
    }, {
        offset: '100%',
        stopColor: '#BE46FF',
        stopOpacity: "1"
    }
]
const FormTitle = ({title, titleHint, style, leftStyle,titleStyle, titleHintStyle,isLeftIcon, left, right,textJB=false,fontSize=14,colorList = defaultColorList,}: Props) => {
    return (
        <FcView style={[styles.container, style]}>
            {left && <FcView>{left}</FcView>}
            {!left &&
                <FcView style={[styles.left,leftStyle]}>
                    {isLeftIcon &&
                        <Image style={{width: 2.5, height: 10, marginRight: 6}} resizeMode={"contain"}
                               source={require('@/assets/images/public/formTitle_icon.png')}></Image>
                    }
                    {textJB &&
                        <View style={{display: 'flex',justifyContent: 'flex-start',height: fontSize+2,width: fontSize*title?.length}}>
                            <LinearGradientText textName={title} colorList={colorList} fontSize={fontSize}/>
                        </View>
                    }
                    {!textJB && <FcText style={[styles.title,titleStyle]} type='formTitle'>{title}</FcText>}
                    <FcText style={[styles.hint,titleHintStyle]}>{titleHint}</FcText>
                </FcView>
            }
            {right && <FcView>{right}</FcView>}
            {!right &&
                <FcView style={styles.right}>

                </FcView>
            }
        </FcView>
    )
}

export default FormTitle

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: "center",
        paddingVertical: 12
    },
    left: {
        flexDirection: 'row',
        alignItems: "center",
        flex: 1
    },
    right: {
        flexDirection: 'row',
        alignItems: "center",
        flexShrink: 0
    },
    hint: {
        fontSize: 12,
        color: 'rgba(0, 0, 0, 0.5)',
        marginLeft: 8
    },
    title: {
        fontSize: 14,
        color: 'rgba(0, 0, 0, 0.9)',
        fontWeight: 500,
    }
})